<template>
  <view class="nav-item flex flex-center" @tap="bindWechat" v-if="!isbindwx">
    <view class="flex-1">绑定微信</view>
    <view>
      <u-icon name="arrow-right" color="#BFBFBF"></u-icon>
    </view>
  </view>
  <view class="nav-item flex flex-center" @tap="unbindWx" v-else>
    <view class="flex-1">取消微信绑定</view>
    <view>
      <u-icon name="arrow-right" color="#BFBFBF"></u-icon>
    </view>
  </view>
</template>
<script>
  export default {
    name: "bindwx",
    data() {
      return {}
    },
    onLoad() {

    },
    methods: {
      bindWechat() {
        let that = this;
        uni.login({
          "provider": "weixin",
          success: function(event) {
            const {
              code
            } = event
            that.$u.api.bindWechat({
              code: event.code
            }).then(res => {
              that.$u.toast('绑定成功');
              uni.$u.vuex('vuex_openid', res.openid);
            })
          }
        })
      },
      unbindWx() {
        let that = this;
        that.$u.api.unbindWx({}).then(res => {
          that.$u.toast('取消绑定成功')
          uni.$u.vuex('vuex_openid', '');
        })
      },
    },
    computed: {
      isbindwx() {
        return this.vuex_openid
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-item {
    padding: 0 27.17rpx;
    margin: 12.68rpx 25.36rpx;
    height: 100rpx;
    border-radius: 9.06rpx;
    border: 1px solid rgba(36, 36, 36, 0.05);
    color: #3D3D3D;
  }

  .btn-wrap {
    padding: 0 80rpx;
    margin-bottom: 54.35rpx;

    >.flex-1 {
      padding: 0 14rpx;
    }
  }
</style>